DAY22：Nuxt 模組 stripe-next

這個模組提供了一個簡單的方式來在你的 Nuxt 應用程序中集成 Stripe，無論是在客戶端還是服務器端。它利用官方的 stripe 套件來進行服務器端使用，並使用 @stripe/stripe-js 進行客戶端使用。

功能

這個 Nuxt 模組提供了一個簡單的方式來在你的 Nuxt 應用程序中集成 Stripe，無論是在客戶端還是服務器端。它利用官方的 stripe 套件來進行服務器端使用，並使用 @stripe/stripe-js 進行客戶端使用。

服務器端使用

此模組提供了一個 useServerStripe 函數，用於在服務器端創建一個 Stripe 實例。此實例可用於與 Stripe API 交互。

import { defineEventHandler } from 'h3'
import { useServerStripe } from '#stripe/server'

export default defineEventHandler(async (event) => {
  const stripe = await useServerStripe(event)
  console.info("Stripe instance:", stripe)

  return {
    version: stripe.VERSION
  }
})

客戶端使用
在客戶端，您可以使用 useClientStripe 函數來獲取 Stripe 實例。這個組合是對 loadStripe 的封裝，可以在頁面或插件中使用。

<template>
  <h1>Nuxt Stripe instance</h1>
  <div>
    {{ stripe ? stripe : 'Loading...'}}
  </div>
</template>

<script setup lang="ts">
// 調用組合以獲取 Stripe 實例
const stripe = await useClientStripe()

// 使用 Stripe 實例來與 stripe.js 庫互動
// stripe.redirectToCheckout(...)
</script>

快速設置
為了快速設置，您需要將 @unlok-co/nuxt-stripe 依賴添加到您的專案中。您可以使用 pnpm、yarn 或 npm 進行安裝，具體取決於您的包管理器。

# 使用 pnpm 安裝
pnpm add -D @unlok-co/nuxt-stripe

# 使用 yarn 安裝
yarn add --dev @unlok-co/nuxt-stripe

# 使用 npm 安裝
npm install --save-dev @unlok-co/nuxt-stripe

然後，將 @unlok-co/nuxt-stripe 添加到您的 nuxt.config.ts 的 modules 部分。

export default defineNuxtConfig({
  modules: [
    '@unlok-co/nuxt-stripe'
  ],
})

最後，您需要配置 stripe 選項，以指定您的 Stripe 金鑰和其他選項。

export default defineNuxtConfig({
  modules: [
    '@unlok-co/nuxt-stripe'
  ],
  stripe: {
    // 服務器端配置
    server: {
      key: 'sk_test_123',
      options: {
        // 可選，默認是 '2022-11-15'
        apiVersion: '2022-11-15',
      }
    },
    // 客戶端配置
    client: {
      key: 'pk_test_123',
      // Stripe 客戶端端配置
      options: {
        // 自訂配置
      }
    }
  }
})

開發
如果您想參與開發，首先克隆此存儲庫，然後執行以下步驟：

# 安裝依賴
yarn install
npm install

# 生成類型存根
yarn dev:prepare
npm run dev:prepare

# 使用 playground 進行開發
yarn dev
npm run dev

# 建立 playground
yarn dev:build
npm run dev:build

# 執行 ESLint
yarn lint
npm run lint

# 執行 Vitest 測試
yarn test
yarn test:watch
npm run test
npm run test:watch

# 發布新版本
yarn release
npm run release

這就是 Nuxt 模組 stripe-next 的簡單介紹。